<template>
  <div :style="{ '--color': `${background_color}` }">

    <van-skeleton title :row="3" style="margin-top: 2rem" v-show="$store.state.isWatchMemberDiypage == 1 && loading"/>

    <!-- 团队名称 -->
    <teamName :show='teamNameShow' :member='true' @editTeamName='childEdit' @childShow='teamCancelTap'></teamName>
    <!-- 团队名称end -->
    <div id="member-all" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" v-show="!loading">
      <!-- 新装修页面  -->
      <div v-if="templateValue == 'designer'">
        <template v-for="(item, index) in components">
          <component
            :key="index"
            :is="item.component_key"
            :isBottom="isBottom"
            :lastIndex="lastIndex"
            :btnFlag="btnFlag"
            :id="item.id"
            :datas="item.remote_data"
            :index="index"
            :component_key="item.component_key"
            :isClick="member_info.jump_level_page"
            :all="components.length"
            :page_id="page_id"
            :validityValue="member_info.validity"
            :other="other"
            :is_login="is_login"
            @openQrCode="openQrCode"
            @TapEditChild='TapEdit'
            @toLogin="toAuthorizedLogin"
          >
          </component>
        </template>
      </div>
      <!--  新装修页面  end  -->

      <!--  不启用装修的部分  -->
      <div id="member" style="position: relative;" v-if="templateValue == '01' || templateValue == '02' || templateValue == '03'">
        <div class="background-box">
          <!-- 顶部会员信息区域 -->
          <header class="member-header">
            <div class="header-avatar" @click.stop="toEditAvatar">
              <img v-if="this.$store.state.isWXlogined != 0" :src="member_info.avatar || emptyImage" />
              <img v-if="this.$store.state.isWXlogined == 0" :src="default_head_img"/>
              <div class="posImg" v-if="member_info.member_team && member_info.member_team.head_frame">
                <img :src="member_info.member_team.head_frame" alt="" />
              </div>
            </div>
            <div class="user-info">
              <div class="user-name-box" v-if="is_login">
                <p class="user-name van-ellipsis" @click="toEditAvatar">
                  {{ member_info.nickname }} <span @click.stop="TapEdit" v-if="member_info.member_team && member_info.member_team.team_name">{{ member_info.member_team.team_name }}</span>
                </p>
                <i @click="toSetting" class="iconfont icon-massage_set" @click.stop="goToUrl('info')"></i>
              </div>
              <div class="user-info-id">
                <template v-if="is_login">
                  <p class="user-id" v-if="member_info.show_member_id != 1 && member_info.member_id">ID:{{ member_info.member_id }}</p>
                  <p class="user-id" v-if="member_info.invite_code && member_info.is_agent && member_info.invite_code_status">{{ $i18n.t("member.邀请码") }}：{{ member_info.invite_code }}</p>
                  <div class="copy-btn" v-if="member_info.invite_code && member_info.is_agent && member_info.invite_code_status" v-clipboard:copy="member_info.invite_code" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</div>
                </template>
                <van-button type="danger" color="var(--themeBaseColor)" @click="toAuthorizedLogin" v-else>登录/注册</van-button>
              </div>
              <div class="user-level" v-if="is_login && templateValue != '03'">
                <div class="user-level-name" v-if="member_info.level_name" @click="gotoMemberGrade">
                  <img class="level-icon" src="../../assets/images/member/level-icon.png" alt="" />
                  <span>{{ member_info.level_name }}</span>
                  <i class="fa fa-angle-right" v-if="member_info.jump_level_page"></i>
                </div>
                <div class="user-level-time" v-if="member_info.validity">{{ member_info.validity }}到期</div>
              </div>
              <div class="user-level" v-if="is_login && templateValue == '03' && shop_level_name">
                <div class="user-level-name">
                  <span>{{ shop_level_name }}</span>
                </div>
              </div>
            </div>
          </header>
          <!-- 顶部会员信息区域 end   -->
          <!-- 云店会员中心模版 个人销售考核，实习店长任务指引内容 -->
          <cloud_shop_member :guide_show_status="guide_show_status" @show_poster="cloud_shop_Qrcode" @update_guide_status="update_guide_Methods" v-if="templateValue == '03' && is_shop_owner" :otherInfo="other.cloud_shop"></cloud_shop_member>
          <!-- 订单列表选项卡 -->
          <div class="order-list" v-show="order.length > 0">
            <van-tabs v-model="order_active" color="#ffc11e" title-active-color="#ffc11e">
              <van-tab :title="item.name" v-for="item in order" :key="item.key">
                <div class="order_item">
                  <div class="order_pub" v-for="(child, index) in item.data" :key="index" @click="toOrderList(item.key, child)">
                    <div class="badge" v-if="child.total && child.total != 0">{{ child.total && child.total > 99 ? "99+" : child.total }}</div>
                    <i class="iconfont" :class="[child.class]"></i>
                    <span>{{ child.status_name }}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <!-- 订单列表选项卡 end -->
        </div>

        <!-- 资产数据 -->
        <div class="asset-box" v-if="assets && assets.length > 0">
          <div class="asset-left-box">
            <ul>
              <li v-for="item in assets" :key="item.key">
                <div class="a" @click.stop="pluginGoto(item)">
                  <span>{{ item.value }}</span>
                  <span class="mr">{{ item.name }}</span>
                  <img class="love-icon" v-show="item.is_change == 1" :src="other.mark_sound && other.mark_sound.notice_img" />
                </div>
              </li>
              <span></span>
            </ul>
          </div>
          <div class="asset-line"></div>
          <div class="asset-right-box" @click="goToUrl('extension')">
            <i class="iconfont icon-fontclass-shouru"></i>
            <span>我的收入</span>
          </div>
        </div>
        <!-- 资产数据 end -->
        <!--爱心值改动音频功能-->
        <div v-show="assetsAudio"></div>

        <!--默认模板01-->
        <template v-if="templateValue === '01'">
          <div class="plugins-box">
            <div class="plugin-header" v-if="plugins.head && plugins.head.length > 0">
              <div class="plugin-header-item" v-for="item in plugins.head" :key="item.class" @click="pluginGoto(item)">
                <i class="iconfont" :class="[item.class]" ></i>
                <span v-if="item.url != 'stationNotice'">{{ item.title }} {{ item.value > 999 ? "999+" : item.value }}</span>
                <div v-else class="newTbox">
                  {{ item.title }}
                  <div class="colorTxt">{{ item.value > 999 ? "999+" : item.value }}</div>
                </div>
              </div>
            </div>
            <div class="plugin-items">
              <swiper style="width: 100%;" :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(page, idx) in plugins.body" :key="idx" class="plugin-items-box">
                  <div class="plugin-items-icon" v-for="icon in page" :key="icon.name" @click="pluginGoto(icon)">
                    <!-- :class="icon.class"  -->
                    <i class="iconfont" :style="{'backgroundImage': `url('${icon.image}')` }"></i>
                    <span>{{ icon.title }}</span>
                    <div class="Badge" v-show="icon.value > 0">{{ icon.value > 99 ? "99+" : icon.value }}</div>
                  </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
          </div>

          <!-- 模板1 底部有 类似于 装修选项卡 -->
          <div class="tabs-box" v-if="plugin_data && plugin_data.length > 0">
            <van-tabs sticky v-model="plugin_active" @click="handlePlugin" color="#ffc11e" title-active-color="#ffc11e" background="#f5f5f5">
              <van-tab :title="plugin.name" :name="plugin.code" v-for="plugin in plugin_data" :key="plugin.code">
                <U_goods ref="recommendGoods" v-if="plugin.code==='recommendGoods' && recommendGoods.list" @setLoadMore="setLoadMore" :id="1" :datas="recommendGoods" :tabcontrol="true" :plugin_active="plugin_active"></U_goods>
                <U_goodsrush ref="limitBuyGoods" v-if="plugin.code==='limitBuyGoods' && limitBuyGoods.list" @setLoadMore="setLoadMore" :id="1" :datas="limitBuyGoods" :tabcontrol="true" :plugin_active="plugin_active"></U_goodsrush>
                <fight_group v-if="plugin.code==='fightGroups'" :list="fightGroups.list" plu="fight-groups"></fight_group>
                <fight_group v-if="plugin.code==='ywmFightGroups'" :list="ywmFightGroups.list" plu="ywm-fight-groups"></fight_group>
                <U_article ref="article" v-if="plugin.code==='article' && article.list" @setLoadMore="setLoadMore" :id="1" :datas="article" :tabcontrol="true" :plugin_active="plugin_active"></U_article>
                <U_shortvideo ref="videoShare" v-if="plugin.code==='videoShare' && videoShare.list" @setLoadMore="setLoadMore" :id="1" :datas="videoShare" :tabcontrol="true"></U_shortvideo>
                <U_community ref="microCommunities" v-if="plugin.code==='microCommunities' && microCommunities.list" @setLoadMore="setLoadMore" :id="1" :datas="microCommunities" :tabcontrol="true"></U_community>
                <U_stores ref="storeCashier" v-if="plugin.code==='storeCashier'" @setLoadMore="setLoadMore" :id="1" :datas="storeCashier" :tabcontrol="true" :plugin_active="plugin_active"></U_stores>
                <U_livestreaming v-if="plugin.code==='room' && room.list" :id="1" :datas="room" :tabcontrol="true"></U_livestreaming>
              </van-tab>
            </van-tabs>
            <!-- 模板1 装修选项卡 end -->

            <U_backup :btnFlag="btnFlag" :id="1" :datas="btnData"></U_backup>
            <i v-if="other.service" class="iconfont icon-member_kefu service-box" :style="{ left: fun.getPhoneEnv() == 3 ? '61%' : buttonClientWidth }" @click="openService"></i>

            <d-connect-customer-service
              :show="showPopup"
              :tel="other.service.service_mobile"
              :online="other.service.cservice"
              :qrcode="other.service.service_QRcode"
              @closed="showPopup = false"
            ></d-connect-customer-service>
          </div>
        </template>
        <!------------------  默认模板01 end ------------------->

        <!--  默认模板02   -->
        <div class="plugin-items-icon" v-if="templateValue === '02'">
          <div class="extension_plate" v-for="(item, index) in plugins" :key="index">
            <h1>
              <div class="spare"></div>
              {{ $i18n.t(`member.${item.name}`) }}
            </h1>
            <ul class="box">
              <li v-show="child.url" v-for="(child, i) in item.data" :key="i" @click="pluginGoto(child)">
                <!-- :class="child.class" :style="child.image_url|setBGImage"-->
                <i class="iconfont" :style="{'backgroundImage': `url('${child.image}')` }" ></i>
                <span>{{ child.title }}</span>
                <div class="Badge" v-show="child.value > 0">{{ child.value > 99 ? "99+" : child.value }}</div>
              </li>
            </ul>
          </div>
        </div>
        <!------------   默认模板02 end   ---------------------->
        <!-- 模版3 云店 -->
        <cloud_shop_template @show_poster="cloud_shop_Qrcode" v-if="templateValue == '03'" :is_shop_owner="is_shop_owner" :cloud_shop_plugin_list="other.cloud_shop_plugin_list" :otherInfo="other.cloud_shop"></cloud_shop_template>
        <!-- 模版3 云店 end -->
      </div>
      <!--   不启用装修的部分end   -->

      <!-- 底部版权部分 -->
      <section>
        <van-button type="primary" style="margin: 0.875rem auto; width: 90%;" size="large" color="#f15353" @click="outInfo()" v-if="checkShowButton()"
          >{{ $i18n.t("member.退出登录") }}
        </van-button>
        <!-- 版权图片 -->
        <img :src="foot.copyright_img" alt="" v-if="!fun.isTextEmpty(foot.copyright_img)" class="copyrightImg" />
        <!-- 版权图片 end -->
        <div class="copyright" @click="copyLink">©{{ foot.copyright }}&nbsp;</div>
        <div class="copyright">
          <template v-if="fun.isApp()">
            <router-link :to="fun.getUrl('userAgreement', {}, { show: 'agreement' })">用户协议</router-link>
            和
            <router-link :to="fun.getUrl('userAgreement', {}, { show: 'privacy' })">隐私政策</router-link>
          </template>
        </div>
        <div v-if="fun.isIphoneX()" style="height: 34px;"></div>
        <div style="height: 1rem; clear: both;"></div>
      </section>
      <!--  底部版权部分  end -->
    </div>
    <!-- 实习店长弹窗指引 -->
    <guidancePopup ref="guidance" :guide_show_status="guide_show_status" @show_poster="cloud_shop_Qrcode" @update_guide_status="update_guide_Methods"></guidancePopup>
    <!--  海报部分  -->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!--  海报部分  end  -->

    <!--  弹窗广告部分  -->
    <div class="cover">
      <div class="mask" v-if="advertising && advertising.is_default === 1">
        <div
          class="modal-mask"
          v-if="advertising.datas && advertising.datas.background_over && popShow"
          :style="{ backgroundColor: `rgba(0, 0, 0, ${advertising.datas.background_over / 100})` }"
        ></div>
        <div class="mask-blank">
          <div class="pop" v-if="popShow" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
            <div class="pop-image">
              <img :src="advertising.image" @click="turnTo" />
              <div class="minLink" v-if="advertising.url_type == 2" @click.stop v-html="advertising.html"></div>
              <div class="icon_close">
                <i class="iconfont icon-close11" @click="closePop"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  弹窗广告部分  end  -->


    <template v-if="$store.state.isWatchMemberDiypage == 0">
      <!-- 没有等级浏览权限 -->
      <div class="noPowerShow">
        <div class="warnTestBox">暂无浏览权限！</div>
      </div>
    </template>
  </div>
</template>

<script>
import member from "./membercontroller";
export default member;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/assets/css/icon.scss";
.van-skeleton__row ,.van-skeleton__title {
  background: #e5e5e5;
  height: 18px;
}
::v-deep .van-button--primary {
  background-color: var(--themeBaseColor) !important;
  border: 1px solid var(--themeBaseColor) !important;
}


/* 会员信息 */
.background-box {
  padding-top: 10px;
  color: #382c0a;
  background-color: #fff;
  background-image: linear-gradient(#ffc11e, #f5f5f5);
  background-image: var(--themeBgColor);
}

.member-header {
  display: flex;
  padding: 10px;
}

.header-avatar {
  flex: 0 0 4rem;
  margin-right: 8px;
  position: relative;
  .posImg{
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    img{
      width: 5rem;
      height: 5rem;
    }
  }
  img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
  }
}

.user-info {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.user-name-box,
.user-info-id,
.user-level {
  display: flex;
  align-items: center;
}

.user-name-box {
  justify-content: space-between;

  .user-name {
    width: 90%;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    span{
      font-size: 14px;
      font-weight: 400;
    }
  }

  .icon-massage_set {
    width: 15%;
    font-size: 20px;
    color: #7f5c02;
  }
}

.user-id {
  font-size: 12px;
  margin-right: 0.5rem;
}

.copy-btn {
  font-size: 12px;
  color: #af820d;
  border: solid 0.0625rem #ebebeb;
  background-color: #fff;
  border-radius: 2rem;
  padding: 0 0.375rem;
}

.user-level-name {
  display: flex;
  padding: 3px 7px;
  font-size: 12px;
  align-items: center;
  background-color: #a36705;
  border-radius: 15px;
  color: #fff;

  .level-icon {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .fa-angle-right {
    font-size: 16px;
    margin-left: 3px;
  }
}

.user-level-time {
  font-size: 12px;
  margin-left: 5px;
  color: #af820d;
}
/* 会员信息 end */
/* 订单列表 */
.order-list {
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  background-color: #fff;

  .order_item {
    display: flex;
    padding-top: 5px;
    border-top: 1px solid #f3f3f3;
  }

  .order_pub {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 0.125rem;
    text-align: center;
    color: #000;
    position: relative;
    font-size: 12px;

    i {
      font-size: 24px;
      color: #000;
      display: inline-block;
      font-weight: bold;
    }

    .badge {
      position: absolute;
      left: 56%;
      top: 0.125rem;
      color: #fff;
      border-radius: 0.625rem;
      background-color: #f15353;
      line-height: 0.875rem;
      font-size: 12px;
      padding: 0 0.3125rem;
      border: solid 1px #f15353;
    }
  }
} /* 订单列表  end */

/* 资产信息 */
.asset-box {
  display: flex;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  background-color: #fff;

  .asset-left-box {
    width: 80%;

    ul {
      display: flex;
      overflow-x: scroll;
      padding: 5px;

      li .a {
        display: flex;
        flex-direction: column;
        position: relative;
      }

      span {
        word-break: keep-all;
        margin: 0 10px;
        line-height: 28px;
        font-weight: bold;
      }

      .mr {
        margin-top: 3px;
        font-size: 13px;
        line-height: 12px;
        font-weight: normal;
      }
      .love-icon {
        position: absolute;
        width:0.9375rem;
        height: 0.9375rem;
        right:0.3125rem;
        top:-0.3125rem;
        z-index:5;
      }

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .asset-line {
    width: 2px;
    background-color: #d4d4d4;
    background-image: radial-gradient(#d4d4d4 5%, #fff 80%, #fff 15%);
  }

  .asset-right-box {
    width: 19%;
    display: flex;
    flex-direction: column;
    font-size: 12px;

    .icon-fontclass-shouru {
      font-size: 26px;
      color: #f15353;
    }
  }
} /* 资产信息 end */

/* 插件数据 */
.plugins-box {
  margin: 10px;
  background-color: #fff;
  border-radius: 15px;

  .plugin-header {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;

    .plugin-header-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33.33%;
      margin-bottom: 5px;
    }
  }

  .plugin-items-box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .plugin-items-icon {
    display: flex;
    flex-direction: column;
    width: 20%;
    margin-bottom: 10px;
    font-size: 12px;
    position: relative;

    .iconfont {
      display: inline-block;
      margin: 0 auto 5px auto;
      width: 2.5rem;
      height: 2.5rem;
    }

    .Badge {
      height: 0.875rem;
      line-height: 0.875rem;
      font-size: 0.75rem;
      color: #fff;
      padding: 0 0.25rem;
      border-radius: 1rem;
      background-color: #f15353;
      position: absolute;
      top: 0px;
      left: 55%;
    }
  }
}

.service-box {
  position: fixed;
  top: 500px;
  z-index: 6;
  font-size: 45px !important;
  color: var(--themeBaseColor);
}

/* 模板二 插件数据 */
.extension_plate {
  margin-bottom: 0.625rem;
  background: #fff;

  h1 {
    font-size: 16px;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    padding: 0 0.875rem;
    display: flex;

    .spare {
      width: 0.25rem;
      height: 1rem;
      border-radius: 0.0625rem;
      background-color: #f15353;
      margin-top: 0.75rem;
      margin-right: 0.375rem;
    }
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    padding: 0.625rem 0;

    li {
      width: 25%;
      margin-bottom: 0.625rem;
      position: relative;

      img {
        width: 1.75rem;
        margin: 0 auto;
        display: block;
      }

      span {
        font-size: 12px;
        line-height: 1.875rem;
        display: block;
        color: #666;
      }

      .Badge {
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        color: #fff;
        padding: 0 0.25rem;
        border-radius: 1rem;
        background-color: #f15353;
        position: absolute;
        top: -5px;
        left: 55%;
      }
    }
  }
}/* 模板二 插件数据 end */

/* 底部 版权模块 */
.copyright {
  color: #a7a7a7;
  margin: 0.625rem 0;
  cursor: pointer;
}

.copyrightImg {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
}/* 底部 版权模块  end */

/* 弹窗广告 */
.minLink {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.cover .mask-blank .pop {
  width: 65%;
  position: fixed;
  z-index: 8888;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cover .mask-blank .pop.pcStyle {
  width: 270px;
}

.cover .mask-blank .pop .pop-image {
  position: relative;
}

.cover .mask-blank .pop .pop-image img {
  width: 100%;
  height: 100%;
}

.cover .mask-blank .pop .pop-image .icon_close {
  top: 0;
  right: 0;
  position: absolute;
  background-color: #333;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.75rem;
  margin-right: -0.75rem;
  border-radius: 50%;
}

.cover .mask-blank .pop .pop-image .icon_close {
  color: #fff;
}

.poster-popup-class {
  background-color: transparent !important;
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
}

/* 弹窗广告 end  */


.newTbox {
  display: flex;
  align-items: center;

  .colorTxt {
    background-color: #f42a2a;
    border-radius: 0.35rem;
    padding: 0 0.219rem;
    height: 1rem;
    line-height: 1rem;
    color: #fff;
    font-size: 0.75rem;
    margin-left: 0.32rem;
  }
}

.posmsg {
  position: absolute;
  top: 0;
  right: 17px;
}

.noPowerShow {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #999;
    position: relative;

    .warnTestBox {
      position: absolute;
      display: inline-block;
      top: 50%;
      left: 50%;
      margin-top: -1.5rem;
      margin-left: -5rem;
      color: #fff;
      width: 10rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 0.5rem;
      background: #333;
    }
  }
</style>
